<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>测试组件用页面</title>

    <link rel="stylesheet" href="../zujian/layui/css/layui.css">
    <script src="../zujian/layui/layui.js"></script>
    <script src="../zujian/jqueryAndBootStrap/jquery-3.4.1.min.js"></script>

    <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
    <!--<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">-->
    <!--<script src="https://www.layuicdn.com/layui/layui.js"></script>-->



    <!-- cursor：pointer设定鼠标的形状为一只伸出食指的手 -->
    <!--<style>-->

        <!--.site-doc-icon li .layui-anim {-->
            <!--width: 150px;-->
            <!--height: 150px;-->
            <!--line-height: 150px;-->
            <!--margin: 0 auto 10px;-->
            <!--text-align: center;-->
            <!--background-color: #009688;-->
            <!--cursor: pointer;-->
            <!--color: #fff;-->
            <!--border-radius: 50%;-->
        <!--}-->
    <!--</style>-->
</head>
<body>
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="https://www.baidu.com" class="layui-btn">一个可跳转的按钮</a>
<button type="button" class="layui-btn layui-btn-primary">原始</button>
<button type="button" class="layui-btn layui-btn-normal">百搭</button>
<button type="button" class="layui-btn layui-btn-warm">暖色</button>
<button type="button" class="layui-btn layui-btn layui-btn-danger">警告</button>
<button type="button" class="layui-btn layui-btn-disabled">禁用</button>
<br/>
<button type="button" class="layui-btn layui-btn-lg">大型按钮</button>
<button type="button" class="layui-btn">默认</button>
<button type="button" class="layui-btn layui-btn-sm">默认</button>
<button type="button" class="layui-btn layui-btn-xs">迷你</button>
<br/>
<button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型百搭</button>
<button type="button" class="layui-btn layui-btn-warm">正常暖色</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">小型警告</button>
<button type="button" class="layui-btn layui-btn-xs layui-btn-disabled">迷你禁用</button>
<br/>
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
<br/>
<button type="button" class="layui-btn layui-btn-radius layui-btn-primary">原始圆角</button>
<button type="button" class="layui-btn layui-btn-radius">默认</button>
<button type="button" class="layui-btn layui-btn-radius layui-btn-normal">百搭</button>
<button type="button" class="layui-btn layui-btn-radius layui-btn-warm">暖色</button>
<button type="button" class="layui-btn layui-btn-radius layui-btn-danger">警告</button>
<button type="button" class="layui-btn layui-btn-radius layui-btn-disabled">禁用</button>
<br/>
<button type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">大型百搭</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">小型警告</button>
<button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled">迷你禁用</button>
<br/>
<button type="button" class="layui-btn"><i class="layui-icon">&#xe608;</i>添加</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon">&#x1002;</i></button>
<span class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;">笑脸</span>
<i class="layui-icon" style="font-size:10px; color: #1E9FFF;">&#xe60c;小笑脸</i>
<!--
layui-icon layui-icon-loading ：这个是引用体图标的固定写法，图标出来是静态的
layui-anim layui-anim-rotate layui-anim-loop：这是layui封装的动画效果
style =“display：inline-block”给了以后可以设置宽高大小
-->
<span><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="display: inline-block;"></i>小转圈</span>
<i class="layui-icon layui-icon-star-fill" style="display:inline-block;">实体五角星</i>
<i class="layui-icon layui-icon-heart-fill" style="display:inline-block;"></i>实心
<i class="layui-icon layui-icon-heart" style="display:inline-block;">空心</i>
<i class="layui-icon layui-icon-light" style="display:inline-block;">亮度/晴</i>
<i class="layui-icon layui-icon-time" style="display:inline-block;">时间/历史</i>
<i class="layui-icon layui-icon-bluetooth" style="display:inline-block;">蓝牙</i>
<i class="layui-icon layui-icon-at" style="display:inline-block;"></i>@艾特
<i class="layui-icon layui-icon-mute" style="display:inline-block;">静音</i>
<i class="layui-icon layui-icon-mike" style="display:inline-block;">录音/麦克风</i>

<i class="layui-icon layui-icon-add-circle-fine" style="display:inline-block;"></i>添加-圆圈-细体
<i class="layui-icon layui-icon-ok-circle" style="display:inline-block;"></i>正确
<i class="layui-icon layui-icon-key" style="display:inline-block;"></i>密钥/钥匙
<i class="layui-icon layui-icon-gift" style="display:inline-block;"></i>礼物/活动
<i class="layui-icon layui-icon-email" style="display:inline-block;"></i>邮箱
<i class="layui-icon layui-icon-rss" style="display:inline-block;"></i>RSS
<i class="layui-icon layui-icon-wifi" style="display:inline-block;"></i>WiFi
<i class="layui-icon layui-icon-logout" style="display:inline-block;"></i>退出/注销
<i class="layui-icon layui-icon-android" style="display:inline-block;"></i>Android 安卓
<i class="layui-icon layui-icon-ios" style="display:inline-block;"></i>Apple IOS 苹果
<i class="layui-icon layui-icon-windows" style="display:inline-block;"></i>Windows
<i class="layui-icon layui-icon-transfer" style="display:inline-block;"></i>穿梭框
<i class="layui-icon layui-icon-service" style="display:inline-block;"></i>客服
<i class="layui-icon layui-icon-subtraction" style="display:inline-block;"></i>减
<i class="layui-icon layui-icon-addition" style="display:inline-block;"></i>加
<i class="layui-icon layui-icon-slider" style="display:inline-block;"></i>滑块
<i class="layui-icon layui-icon-print" style="display:inline-block;"></i>打印
<i class="layui-icon layui-icon-export" style="display:inline-block;"></i>导出
<i class="layui-icon layui-icon-cols" style="display:inline-block;"></i>列
<i class="layui-icon layui-icon-screen-restore" style="display:inline-block;"></i>退出全屏
<i class="layui-icon layui-icon-screen-full" style="display:inline-block;"></i>全屏
<i class="layui-icon layui-icon-rate-half" style="display:inline-block;"></i>半星
<i class="layui-icon layui-icon-rate" style="display:inline-block;"></i>星星-空心
<i class="layui-icon layui-icon-rate-solid" style="display:inline-block;"></i>星星-实心
<i class="layui-icon layui-icon-cellphone" style="display:inline-block;"></i>手机
<i class="layui-icon layui-icon-vercode" style="display:inline-block;"></i>验证码
<i class="layui-icon layui-icon-login-wechat" style="display:inline-block;"></i>微信
<i class="layui-icon layui-icon-login-qq" style="display:inline-block;"></i>QQ
<i class="layui-icon layui-icon-login-weibo" style="display:inline-block;"></i>微博
<i class="layui-icon layui-icon-password" style="display:inline-block;"></i>密码
<i class="layui-icon layui-icon-username" style="display:inline-block;"></i>用户名
<i class="layui-icon layui-icon-refresh-3" style="display:inline-block;"></i>刷新-粗
<i class="layui-icon layui-icon-auz" style="display:inline-block;"></i>授权
<i class="layui-icon layui-icon-spread-left" style="display:inline-block;"></i>左向右伸缩菜单
<i class="layui-icon layui-icon-shrink-right" style="display:inline-block;"></i>右向左伸缩菜单
<i class="layui-icon layui-icon-snowflake" style="display:inline-block;"></i>雪花
<i class="layui-icon layui-icon-tips" style="display:inline-block;"></i>提示说明
<i class="layui-icon layui-icon-note" style="display:inline-block;"></i>便签
<i class="layui-icon layui-icon-home" style="display:inline-block;"></i>主页
<i class="layui-icon layui-icon-senior" style="display:inline-block;"></i>高级
<i class="layui-icon layui-icon-refresh layui-anim layui-anim-rotate layui-anim-loop" style="display:inline-block;"></i>刷新
<i class="layui-icon layui-icon-refresh-1" style="display:inline-block;"></i>刷新1
<i class="layui-icon layui-icon-flag" style="display:inline-block;"></i>旗帜
<i class="layui-icon layui-icon-theme" style="display:inline-block;"></i>主题
<i class="layui-icon layui-icon-notice" style="display:inline-block;"></i>消息-通知
<i class="layui-icon layui-icon-website" style="display:inline-block;"></i>网站
<i class="layui-icon layui-icon-console" style="display:inline-block;"></i>控制台
<i class="layui-icon layui-icon-face-surprised" style="display:inline-block;"></i>表情-惊讶
<i class="layui-icon layui-icon-set" style="display:inline-block;"></i>设置-空心
<i class="layui-icon layui-icon-template-1" style="display:inline-block;"></i>模板
<i class="layui-icon layui-icon-app" style="display:inline-block;"></i>应用
<i class="layui-icon layui-icon-template" style="display:inline-block;"></i>模板
<i class="layui-icon layui-icon-praise" style="display:inline-block;"></i>赞
<i class="layui-icon layui-icon-tread" style="display:inline-block;"></i>踩
<i class="layui-icon layui-icon-male" style="display:inline-block;"></i>男
<i class="layui-icon layui-icon-female" style="display:inline-block;"></i>女
<i class="layui-icon layui-icon-camera" style="display:inline-block;"></i>相机-空心
<i class="layui-icon layui-icon-camera-fill" style="display:inline-block;"></i>相机-实心
<i class="layui-icon layui-icon-more" style="display:inline-block;"></i>菜单-水平
<i class="layui-icon layui-icon-more-vertical" style="display:inline-block;"></i>菜单-垂直
<i class="layui-icon layui-icon-rmb" style="display:inline-block;"></i>金额-人民币
<i class="layui-icon layui-icon-dollar" style="display:inline-block;"></i>金额-美元
<i class="layui-icon layui-icon-diamond" style="display:inline-block;"></i>钻石-等级
<i class="layui-icon layui-icon-fire" style="display:inline-block;"></i>火
<i class="layui-icon layui-icon-return" style="display:inline-block;"></i>返回
<i class="layui-icon layui-icon-location" style="display:inline-block;"></i>位置-地图
<i class="layui-icon layui-icon-read" style="display:inline-block;"></i>办公-阅读
<i class="layui-icon layui-icon-survey" style="display:inline-block;"></i>调查
<i class="layui-icon layui-icon-face-smile" style="display:inline-block;"></i>表情-微笑
<i class="layui-icon layui-icon-face-cry" style="display:inline-block;"></i>表情-哭泣
<i class="layui-icon layui-icon-cart-simple" style="display:inline-block;"></i>购物车
<i class="layui-icon layui-icon-cart" style="display:inline-block;"></i>购物车
<i class="layui-icon layui-icon-next" style="display:inline-block;"></i>下一页
<i class="layui-icon layui-icon-prev" style="display:inline-block;"></i>上一页
<i class="layui-icon layui-icon-upload-drag" style="display:inline-block;"></i>上传-空心-拖拽
<i class="layui-icon layui-icon-upload" style="display:inline-block;"></i>上传-实心
<i class="layui-icon layui-icon-download-circle" style="display:inline-block;"></i>下载-圆圈
<i class="layui-icon layui-icon-component" style="display:inline-block;"></i>组件
<i class="layui-icon layui-icon-file-b" style="display:inline-block;"></i>文件-粗
<i class="layui-icon layui-icon-user" style="display:inline-block;"></i>用户
<i class="layui-icon layui-icon-find-fill" style="display:inline-block;"></i>发现-实心
<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="display:inline-block;"></i>loading
<i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop" style="display:inline-block;"></i>loading1
<i class="layui-icon layui-icon-add-1" style="display:inline-block;"></i>添加
<i class="layui-icon layui-icon-play" style="display:inline-block;"></i>播放
<i class="layui-icon layui-icon-pause" style="display:inline-block;"></i>暂停
<i class="layui-icon layui-icon-headset" style="display:inline-block;"></i>音频-耳机
<i class="layui-icon layui-icon-video" style="display:inline-block;"></i>视频
<i class="layui-icon layui-icon-voice" style="display:inline-block;"></i>语音-声音
<i class="layui-icon layui-icon-speaker" style="display:inline-block;"></i>消息-通知-喇叭
<i class="layui-icon layui-icon-fonts-del" style="display:inline-block;"></i>删除线
<i class="layui-icon layui-icon-fonts-code" style="display:inline-block;"></i>代码
<i class="layui-icon layui-icon-fonts-html" style="display:inline-block;"></i>HTML
<i class="layui-icon layui-icon-fonts-strong" style="display:inline-block;"></i>字体加粗
<i class="layui-icon layui-icon-unlink" style="display:inline-block;"></i>删除链接
<i class="layui-icon layui-icon-picture" style="display:inline-block;"></i>图片
<i class="layui-icon layui-icon-link" style="display:inline-block;"></i>链接
<i class="layui-icon layui-icon-face-smile-b" style="display:inline-block;"></i>表情-笑-粗
<i class="layui-icon layui-icon-align-left" style="display:inline-block;"></i>左对齐
<i class="layui-icon layui-icon-align-right" style="display:inline-block;"></i>右对齐
<i class="layui-icon layui-icon-align-center" style="display:inline-block;"></i>居中对齐
<i class="layui-icon layui-icon-fonts-u" style="display:inline-block;"></i>字体-下划线
<i class="layui-icon layui-icon-fonts-i" style="display:inline-block;"></i>字体-斜体
<i class="layui-icon layui-icon-tabs" style="display:inline-block;"></i>Tabs 选项卡
<i class="layui-icon layui-icon-radio" style="display:inline-block;"></i>单选框-选中
<i class="layui-icon layui-icon-circle" style="display:inline-block;"></i>单选框-候选
<i class="layui-icon layui-icon-edit" style="display:inline-block;"></i>编辑
<i class="layui-icon layui-icon-share" style="display:inline-block;"></i>分享
<i class="layui-icon layui-icon-delete" style="display:inline-block;"></i>删除
<i class="layui-icon layui-icon-form" style="display:inline-block;"></i>表单
<i class="layui-icon layui-icon-cellphone-fine" style="display:inline-block;"></i>手机-细体
<i class="layui-icon layui-icon-dialogue" style="display:inline-block;"></i>聊天 对话 沟通
<i class="layui-icon layui-icon-fonts-clear" style="display:inline-block;"></i>文字格式化
<i class="layui-icon layui-icon-layer" style="display:inline-block;"></i>窗口
<i class="layui-icon layui-icon-date" style="display:inline-block;"></i>日期
<i class="layui-icon layui-icon-water" style="display:inline-block;"></i>水 下雨
<i class="layui-icon layui-icon-code-circle" style="display:inline-block;"></i>代码-圆圈
<i class="layui-icon layui-icon-carousel" style="display:inline-block;"></i>轮播组图
<i class="layui-icon layui-icon-prev-circle" style="display:inline-block;"></i>翻页
<i class="layui-icon layui-icon-layouts" style="display:inline-block;"></i>布局
<i class="layui-icon layui-icon-util" style="display:inline-block;"></i>工具
<i class="layui-icon layui-icon-templeate-1" style="display:inline-block;"></i>选择模板
<i class="layui-icon layui-icon-upload-circle" style="display:inline-block;"></i>上传-圆圈
<i class="layui-icon layui-icon-tree" style="display:inline-block;"></i>树
<i class="layui-icon layui-icon-table" style="display:inline-block;"></i>表格
<i class="layui-icon layui-icon-chart" style="display:inline-block;"></i>图表
<i class="layui-icon layui-icon-chart-screen" style="display:inline-block;"></i>图标 报表 屏幕
<i class="layui-icon layui-icon-engine" style="display:inline-block;"></i>引擎
<i class="layui-icon layui-icon-triangle-d" style="display:inline-block;"></i>下三角
<i class="layui-icon layui-icon-triangle-r" style="display:inline-block;"></i>右三角
<i class="layui-icon layui-icon-file" style="display:inline-block;"></i>文件
<i class="layui-icon layui-icon-set-sm" style="display:inline-block;"></i>设置-小型
<i class="layui-icon layui-icon-reduce-circle" style="display:inline-block;"></i>减少-圆圈
<i class="layui-icon layui-icon-add-circle" style="display:inline-block;"></i>添加-圆圈
<i class="layui-icon layui-icon-404" style="display:inline-block;"></i>404
<i class="layui-icon layui-icon-about" style="display:inline-block;"></i>关于
<i class="layui-icon layui-icon-up" style="display:inline-block;"></i>箭头 向上
<i class="layui-icon layui-icon-down" style="display:inline-block;"></i>箭头 向下
<i class="layui-icon layui-icon-left" style="display:inline-block;"></i>箭头 向左
<i class="layui-icon layui-icon-right" style="display:inline-block;"></i>箭头 向右
<i class="layui-icon layui-icon-circle-dot" style="display:inline-block;"></i>圆点
<i class="layui-icon layui-icon-search" style="display:inline-block;"></i>搜索
<i class="layui-icon layui-icon-set-fill" style="display:inline-block;"></i>设置-实心
<i class="layui-icon layui-icon-group" style="display:inline-block;"></i>群组
<i class="layui-icon layui-icon-friends" style="display:inline-block;"></i>好友
<i class="layui-icon layui-icon-reply-fill" style="display:inline-block;"></i>回复 评论 实心
<i class="layui-icon layui-icon-menu-fill" style="display:inline-block;"></i>菜单 隐身 实心
<i class="layui-icon layui-icon-log" style="display:inline-block;"></i>记录
<i class="layui-icon layui-icon-picture-fine" style="display:inline-block;"></i>图片-细体
<i class="layui-icon layui-icon-face-smile-fine" style="display:inline-block;"></i>表情-笑-细体
<i class="layui-icon layui-icon-list" style="display:inline-block;"></i>列表
<i class="layui-icon layui-icon-release" style="display:inline-block;"></i>发布 纸飞机
<i class="layui-icon layui-icon-ok" style="display:inline-block;"></i>对 OK
<i class="layui-icon layui-icon-help" style="display:inline-block;"></i>帮助
<i class="layui-icon layui-icon-chat" style="display:inline-block;"></i>客服
<i class="layui-icon layui-icon-top" style="display:inline-block;"></i>top 置顶
<i class="layui-icon layui-icon-star" style="display:inline-block;"></i>收藏-空心
<i class="layui-icon layui-icon-star-fill" style="display:inline-block;"></i>收藏-实心
<i class="layui-icon layui-icon-close-fill" style="display:inline-block;"></i>关闭-实心
<i class="layui-icon layui-icon-close" style="display:inline-block;"></i>关闭-空心
<i class="layui-icon layui-icon-ok-circle" style="display:inline-block;"></i>正确
<i class="layui-icon layui-icon-add-circle-fine" style="display:inline-block;"></i>添加-圆圈-细体
<br/>
<!--下面是设置颜色的-->
<i class="layui-icon layui-icon-tree layui-bg-red"></i>测试颜色赤色class=layui-bg-red
<br/>
<i class="layui-icon layui-icon-tree layui-bg-orange"></i>测试颜色橙色class="layui-bg-orange"
<br/>
<i class="layui-icon layui-icon-tree layui-bg-green"></i>测试颜色橙色class="layui-bg-green"
<br/>
<i class="layui-icon layui-icon-tree layui-bg-cyan"></i>测试颜色藏青class="layui-bg-cyan"
<br/>
<i class="layui-icon layui-icon-tree layui-bg-blue"></i>测试颜色蓝色class="layui-bg-blue"
<br/>
<i class="layui-icon layui-icon-tree layui-bg-black"></i>测试颜色雅黑class="layui-bg-black"
<br/>
<i class="layui-icon layui-icon-tree layui-bg-gray"></i>测试颜色银灰class="layui-bg-gray"
<br/>
css动画
<br/>


<span class="site-doc-icon site-doc-anim">
    <button type="button" class="layui-btn layui-btn-lg layui-btn-normal layui-anim" data-anim="layui-anim-up">从最底部往上滑入</button>
</span>

<span class="site-doc-icon site-doc-anim">
    <button type="button" class="layui-btn layui-btn-lg layui-btn-normal layui-anim" data-anim="layui-anim-upbit">微微往上滑入</button>
</span>

<span class="site-doc-icon site-doc-anim">
    <button type="button" class="layui-btn layui-btn-lg layui-btn-normal layui-anim" data-anim="layui-anim-scale">平滑放大</button>
</span>

<span class="site-doc-icon site-doc-anim">
    <button type="button" class="layui-btn layui-btn-lg layui-btn-normal layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</button>
</span>

<span class="site-doc-icon site-doc-anim">
    <button type="button" class="layui-btn layui-btn-lg layui-btn-normal layui-anim" data-anim="layui-anim-fadein">渐现</button>
</span>

<span class="site-doc-icon site-doc-anim">
    <button type="button" class="layui-btn layui-btn-lg layui-btn-normal layui-anim" data-anim="layui-anim-fadeout">渐隐</button>
</span>

<span class="site-doc-icon site-doc-anim">
    <button type="button" class="layui-btn layui-btn-lg layui-btn-normal layui-anim" data-anim="layui-anim-rotate">360度旋转</button>
</span>
<span class="site-doc-icon site-doc-anim">
    <button type="button" class="layui-btn layui-btn-lg layui-btn-normal layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</button>
</span>
<br/>
测试进度条
<!-- 当对元素设置了class为 layui-progress-big 时，即为大尺寸的进度条风格。
默认风格的进度条的百分比如果开启，会在右上角显示，而大号进度条则会在内部显示。 -->
<br/><br/>
<div class="layui-progress">
    <div class="layui-progress-bar" lay-percent="10%"></div>
</div>
<br/><br/><br/>
<div class="layui-progress" lay-showPercent="true">
    <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
</div>
<br/><br/><br/>
<div class="layui-progress" lay-showPercent="yes">
    <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
</div>
<br/><br/><br/>
<div class="layui-progress layui-progress-big" lay-showPercent="yes">
    <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
</div>
<br/><br/><br/>
动态进度条需要配合js
<div class="layui-progress layui-progress-big" lay-filter="demoJinDuTiao001" lay-showPercent="true">
    <div class="layui-progress-bar layui-bg-red fuckJinDuTiao0001" lay-percent=""></div>
</div>
<br/><br/>测试徽章<br/>
小圆点，通过 layui-badge-dot 来定义，里面不能加文字
<span class="layui-badge-dot"></span>
<span class="layui-badge-dot layui-bg-orange"></span>
<span class="layui-badge-dot layui-bg-green"></span>
<span class="layui-badge-dot layui-bg-cyan"></span>
<span class="layui-badge-dot layui-bg-blue"></span>
<span class="layui-badge-dot layui-bg-black"></span>
<span class="layui-badge-dot layui-bg-gray"></span>

椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式
<span class="layui-badge">6</span>
<span class="layui-badge">99</span>
<span class="layui-badge">61728</span>

<span class="layui-badge">赤</span>
<span class="layui-badge layui-bg-orange">橙</span>
<span class="layui-badge layui-bg-green">绿</span>
<span class="layui-badge layui-bg-cyan">青</span>
<span class="layui-badge layui-bg-blue">蓝</span>
<span class="layui-badge layui-bg-black">黑</span>
<span class="layui-badge layui-bg-gray">灰</span>

边框体，通过 layui-badge-rim 来定义
<span class="layui-badge-rim">6</span>
<span class="layui-badge-rim">Hot</span>
<br/><br/>引用块<br/>
<blockquote class="layui-elem-quote">引用区域的文字</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>
<br/><br/>字段集区块<br/>
<fieldset class="layui-elem-field">
    <legend>字段集区块 - 默认风格</legend>
    <div class="layui-field-box">
        内容区域
    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>字段集区块 - 横线风格</legend>
    <div class="layui-field-box">
        内容区域
    </div>
</fieldset>
你可以把它看作是一个有标题的横线
<br/><br/>横线<br/>
默认分割线
<hr>

赤色分割线
<hr class="layui-bg-red">

橙色分割线
<hr class="layui-bg-orange">

墨绿分割线
<hr class="layui-bg-green">

青色分割线
<hr class="layui-bg-cyan">

蓝色分割线
<hr class="layui-bg-blue">

黑色分割线
<hr class="layui-bg-black">

灰色分割线
<hr class="layui-bg-gray">
<script>
    // 注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use('element', function(){
        let $ = layui.jquery;
        let element0001 = layui.element;

        //更新进图条图形
        element0001.progress('demoJinDuTiao001','50%');
        //更新进度条图形数值
        $('.fuckJinDuTiao0001').attr('lay-percent','50%');
        //没有这玩意, 就无法 更新进度条图形数值
        layui.element.init();
    });


    <!-- 下面是动画必备js -->
    layui.use([], function () {
        let $ = layui.jquery;
        //演示动画开始
        $('.site-doc-icon .layui-anim').on('click', function(){
            var othis = $(this), anim = othis.data('anim');

            // 停止循环
            if(othis.hasClass('layui-anim-loop')){
                return othis.removeClass(anim);
            }
            othis.removeClass(anim);
            setTimeout(function(){
                othis.addClass(anim);
            });
            //恢复渐隐
            if(anim === 'layui-anim-fadeout'){
                setTimeout(function(){
                    othis.removeClass(anim);
                }, 1300);
            }
        });
        //演示动画结束
    })
</script>
</body>
</html>